<!DOCTYPE composition PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<ui:composition xmlns="http://www.w3.org/1999/xhtml"
	    		xmlns:ui="http://java.sun.com/jsf/facelets"
	  			xmlns:h="http://java.sun.com/jsf/html"
	  			xmlns:f="http://java.sun.com/jsf/core"
                xmlns:sf="http://www.springframework.org/tags/faces"
				template="/WEB-INF/layouts/standard.xhtml">

<ui:define name="content">

<div class="section">
	<h2>Book Hotel</h2>
	<ui:fragment id="messages">
		<div id="messagesInsertionPoint">
			<h:messages errorClass="errors" />
		</div>
	</ui:fragment>
	<h:form id="bookingForm">
	<fieldset>
		<div class="field">
			<div class="label">Name:</div>
			<div class="output">#{booking.hotel.name}</div>
		</div>
		<div class="field">
			<div class="label">Address:</div>
			<div class="output">#{booking.hotel.address}</div>
		</div>
		<div class="field">
			<div class="label">City, State:</div>
			<div class="output">#{booking.hotel.city}, #{booking.hotel.state}</div>
		</div>
		<div class="field">
			<div class="label">Zip:</div>
			<div class="output">#{booking.hotel.zip}</div>
		</div>
		<div class="field">
			<div class="label">Country:</div>
			<div class="output">#{booking.hotel.country}</div>
		</div>
        <div class="field">
            <div class="label">Nightly rate:</div>
            <div class="output">
                <h:outputText value="#{booking.hotel.price}">
                    <f:convertNumber type="currency" currencySymbol="$"/>
                </h:outputText>
            </div>
        </div>
		<div class="field">
			<div class="label">
				<h:outputLabel for="checkinDate">Check In Date:</h:outputLabel>
			</div>
			<div class="input">
				<sf:clientDateValidator required="true" >
		        	<h:inputText id="checkinDate" value="#{booking.checkinDate}" required="true">
	                	<f:convertDateTime pattern="yyyy-MM-dd" timeZone="EST"/>
	                </h:inputText>
               	</sf:clientDateValidator>
			</div>
		</div>
		<div class="field">
			<div class="label">
				<h:outputLabel for="checkoutDate">Check Out Date:</h:outputLabel>
			</div>
			<div class="input">
				<sf:clientDateValidator required="true">
					<h:inputText id="checkoutDate" value="#{booking.checkoutDate}" required="true">
						<f:convertDateTime pattern="yyyy-MM-dd" timeZone="EST"/>
					</h:inputText>
				</sf:clientDateValidator>
			</div>
		</div>
		<div class="field">
			<div class="label">
				<h:outputLabel for="beds">Room Preference:</h:outputLabel>
			</div>
			<div class="input">
				<h:selectOneMenu id="beds" value="#{booking.beds}">
					<f:selectItems value="#{referenceData.bedOptions}"/>
				</h:selectOneMenu>
			</div>
		</div>
		<div class="field">
			<div class="label">
				<h:outputLabel for="smoking">Smoking Preference:</h:outputLabel>
			</div>
			<div id="radio" class="input">
				<h:selectOneRadio id="smoking" value="#{booking.smoking}" layout="pageDirection">
					<f:selectItems value="#{referenceData.smokingOptions}"/>
				</h:selectOneRadio>
			</div>
		</div>
		<div class="field">
			<div class="label">
				<h:outputLabel for="creditCard">Credit Card #:</h:outputLabel>
			</div>
			<div class="input">
				<sf:clientTextValidator required="true" regExp="[0-9]{16}" invalidMessage="A 16-digit credit card number is required.">
					<h:inputText id="creditCard" value="#{booking.creditCard}" required="true"/>
				</sf:clientTextValidator>
			</div>
		</div>
		<div class="field">
			<div class="label">
				<h:outputLabel for="creditCardName">Credit Card Name:</h:outputLabel>
			</div>
			<div class="input">
				<sf:clientTextValidator required="true">
					<h:inputText id="creditCardName" value="#{booking.creditCardName}" required="true"/>
				</sf:clientTextValidator>
			</div>
		</div>
		<div class="field">
			<div class="label">
				<h:outputLabel for="creditCardExpiryMonth">Expiration Date:</h:outputLabel>
			</div>
			<div class="input">
				<h:selectOneMenu id="creditCardExpiryMonth" value="#{booking.creditCardExpiryMonth}">
					<f:selectItems value="#{referenceData.creditCardExpMonths}" />
				</h:selectOneMenu>
				<h:selectOneMenu id="creditCardExpiryYear" value="#{booking.creditCardExpiryYear}">
					<f:selectItems value="#{referenceData.creditCardExpYears}"/>
				</h:selectOneMenu>
			</div>
		</div>
		<div class="buttonGroup">
			<sf:validateAllOnClick>
				<sf:commandButton id="proceed" action="proceed" processIds="*" value="Proceed"/>&#160;
			</sf:validateAllOnClick>
			<sf:commandButton id="cancel" value="Cancel" action="cancel"/>
		</div>		
	</fieldset>
	</h:form>
</div>

</ui:define>
</ui:composition>